<template>
  <div class="app-container">
    <span>请选择系统类型：</span>
    <el-select v-model="value" placeholder="请选择">
      <el-option label="Android" value="1"/>
      <el-option label="IOS" value="2"/>
      <el-option label="WEB" value="3"/>
    </el-select>
    <el-button v-show="value!='3'" type="primary" @click="addVersionHandle">添加版本信息</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top:30px">
      <el-table-column align="center" label="ID" prop="id"/>
      <el-table-column align="center" label="版本号" prop="versionNumber" />
      <el-table-column align="center" label="版本名称" prop="versionName" />
      <el-table-column align="center" label="系统类型" prop="stystemTypeValue" />
      <el-table-column align="center" label="版本描述信息" prop="versionDesc" />
      <el-table-column align="center" label="安装文件下载链接" prop="downloadUrl"/>
      <el-table-column align="center" label="备注" prop="remarks" />
      <el-table-column align="center" label="发布时间">
        <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="mini" @click="setVersionHandle(scope.row)">更新</el-button>
          <el-button v-show="value!='3'" size="mini" @click="delVersionHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="120px">
        <el-form-item label="版本号">
          <el-input v-model="form.versionNumber"/>
        </el-form-item>
        <el-form-item v-show="value!='3'" label="版本名称">
          <el-input v-model="form.versionName"/>
        </el-form-item>
        <el-form-item v-show="value!='3'" label="版本描述信息1">
          <el-input v-model="form.versionDesc1"/>
        </el-form-item>
        <el-form-item v-show="value!='3'" label="版本描述信息2">
          <el-input v-model="form.versionDesc2"/>
        </el-form-item>
        <el-form-item v-show="value!='3'" label="版本描述信息3">
          <el-input v-model="form.versionDesc3"/>
        </el-form-item>
        <el-form-item v-show="value=='1'" label="安装包文件">
          <input type="file" @change="fileChange">
        </el-form-item>
        <el-form-item v-show="value=='2'" label="下载地址">
          <el-input v-model="form.downloadUrl"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remarks"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSetVersion">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getVersion, setVersion, delVersion, addVersion } from '@/api/table'
import { parseTime } from '@/utils/index'
export default {
  name: 'Version',
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      value: '1',
      list: null,
      listLoading: true,

      dialogFormVisible: false,
      form: {},

      title: '',
      addFlag: false
    }
  },
  watch: {
    value(val) {
      this.fetchData(val)
    }
  },
  created() {
    this.fetchData('1')
  },
  methods: {
    fetchData(type) {
      this.listLoading = true
      getVersion({ 'version': type }).then(response => {
        setTimeout(() => {
          this.listLoading = false
        }, 300)
        this.list = response.data
      })
    },
    fileChange(e) {
      this.form.file = e.target.files[0]
    },
    setVersionHandle(item) {
      this.addFlag = false
      this.title = '更新版本'
      this.dialogFormVisible = true
      this.form = item
      this.form.versionDesc1 = item.versionDesc.split('#')[0]
      this.form.versionDesc2 = item.versionDesc.split('#')[1]
      this.form.versionDesc3 = item.versionDesc.split('#')[2]
    },
    confirmSetVersion() {
      if (this.form.versionDesc2) {
        this.form.versionDesc = this.form.versionDesc1 + '#' + this.form.versionDesc2
      }
      if (this.form.versionDesc3) {
        this.form.versionDesc = this.form.versionDesc1 + '#' + this.form.versionDesc2 + '#' + this.form.versionDesc3
      }
      var params = {}
      if (this.value === '1') {
        params = {
          'systemType': this.value,
          'versionNumber': this.form.versionNumber,
          'versionName': this.form.versionName,
          'file': this.form.file,
          'versionDesc': this.form.versionDesc,
          'updateType': '1',
          'remarks': this.form.remarks || ''
        }
      } else if (this.value === '2') {
        params = {
          'systemType': this.value,
          'versionNumber': this.form.versionNumber,
          'versionName': this.form.versionName,
          'downloadUrl': this.form.downloadUrl,
          'versionDesc': this.form.versionDesc,
          'updateType': '1',
          'remarks': this.form.remarks || ''
        }
      } else {
        params = {
          'systemType': this.value,
          'versionNumber': this.form.versionNumber,
          'versionName': this.form.versionName,
          'versionDesc': this.form.versionDesc,
          'remarks': this.form.remarks || ''
        }
      }
      if (this.addFlag === false) {
        params.id = this.form.id
      }
      // console.log(params)
      if (this.addFlag === true) {
        // 添加
        addVersion(params).then(response => {
          if (response.code === 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
          this.fetchData(this.value)
          this.dialogFormVisible = false
        })
      } else {
        // 更新
        setVersion(params).then(response => {
          if (response.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
          this.fetchData(this.value)
          this.dialogFormVisible = false
        })
      }
    },
    delVersionHandle(id) {
      this.$confirm('是否确认删除？', '', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delVersion({
          'id': id
        }).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.fetchData(this.value)
        })
      })
    },
    addVersionHandle() {
      this.addFlag = true
      this.title = '新增版本'
      this.dialogFormVisible = true
      this.form = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.name{
  color:#409EFF;
}
</style>
